<!-- 首页 -->
<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部 -->
      <el-header class="home_header" height="80px">
        <div class="title">叩丁狼电商运营平台</div>
        <div class="user">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link" style="color:#fff">
              <span>admin</span>
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="1">个人详情</el-dropdown-item>
                <el-dropdown-item command="2">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container class="home_container">
        <!-- 侧边栏 -->
        <el-aside class="home_aside" width="240px">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            :unique-opened="true"
            :router="true"
            @open="handleOpen"
            @close="handleClose"
          >
            <!-- 返回首页 -->
            <el-menu-item index="/index">
              <template #title>
                <el-icon>
                  <house />
                </el-icon>
                <span>首页</span>
              </template>
            </el-menu-item>
            <!-- 根据权限渲染列表 -->
            <el-sub-menu :index="String(item.id)" v-for="(item, value) in newMenus" :key="item.id">
              <template #title>
                <el-icon>
                  <van v-if="value == 1" />
                  <list v-else-if="value == 2" />
                  <location v-else-if="value == 3" />
                  <sunny v-else />
                </el-icon>
                <span>{{ item.title }}</span>
              </template>
              <template v-for="(subItem, idx) in item.children" :key="subItem.id">
                <!-- hidden 控制一些不需要显示的菜单 -->
                <el-menu-item
                  :index="`/${item.name}/${subItem.name}`"
                  v-if="!subItem.hidden"
                >{{ subItem.title }}</el-menu-item>
              </template>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <!-- 主体内容 -->
        <el-main class="home_main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted, computed } from "vue";
import { ElMessage } from 'element-plus'
import { useStore } from "vuex";
import {
  Location, House, Sunny, Van, Ship, List, ArrowDown
} from '@element-plus/icons-vue'

interface menuObj {
  parentId: number;
  id: number;
  title: string;
  hidden: 0 | 1;
  name: string;
  children?: menuObj[];
}
interface newMenuObj {
  [key: number]: menuObj;
}

const store = useStore() //获取vuex对象
const newMenus = computed<newMenuObj>(() => store.getters.getNewMenus)
const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleCommand = (command: string | number | object) => {
  ElMessage.success(`点击了第 ${command} 个`)
}
onMounted((): void => {
  // console.log(store.state.menus);
  // console.log(store.getters.getNewMenus);
})
</script>
<style lang="less" scoped>
.common-layout {
  .home_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    background-color: #409eff;
    .title {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: 2px;
    }
  }
  .home_container {
    height: 650px;
    .home_aside {
      overflow: hidden;
      background-color: beige;
      .el-menu-vertical-demo {
        height: 100%;
      }
    }
    .home_main {
      background-color: aquamarine;
    }
  }
}
</style>
